<!DOCTYPE html>
<html>
  <head>
    <title>Popcorn 1.0 JSON parser Plug-in Demo</title>

    <script src="../../popcorn.js"></script>
    <script src="../../modules/parser/popcorn.parser.js"></script>
    <script src="../../modules/timeline-sources/popcorn.timeline-sources.js"></script>
    <script src="../../plugins/webpage/popcorn.webpage.js"></script>
    <script src="../../plugins/footnote/popcorn.footnote.js"></script>
    <script src="../../plugins/googlemap/popcorn.googlemap.js"></script>
    <script src="../../parsers/parserJSON/popcorn.parserJSON.js"></script>

  </head>
  <body>
    <h1 id="qunit-header">Popcorn 1.0 JSON parser Plug-in Demo</h1>
    <p></p>
    <div>
      <video id="video" data-timeline-sources="data/data.json"
        controls
        width= "250px"
        poster="../../test/poster.png"> 

        <source id="mp4"
          src="../../test/trailer.mp4"
          type='video/mp4; codecs="avc1, mp4a"'>

        <source id="ogv"
          src="../../test/trailer.ogv"
          type='video/ogg; codecs="theora, vorbis"'> 

        <p>Your user agent does not support the HTML5 Video element.</p>

      </video>
    </div>

    <style>
      .displays {
        width: 300px;
        height: 300px;
      }
    </style>
    <div class="displays" id="iframe-container"></div>
    <div class="displays" id="map-container"></div>
    <div class="displays" id="footnote-container"></div>

  </body>
</html>
